<!DOCTYPE html>
<html>
  <head>
    <title>jQuery UI Buttons Lab</title>
    <link rel="stylesheet" type="text/css" href="../../styles/core.css">
    <link rel="stylesheet" type="text/css" href="../../themes/cupertino/jquery-ui-1.8.custom.css">
    <script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="../../scripts/jqia2.support.js"></script>
    <script type="text/javascript">
      $(function(){

        $('#labForm').submit(function(){ return false; } );

        $('#applyButton').click(function(){
          $('.testSubject').button('destroy');
          var options = {};
          $.collectOptions(options);
          //
          // special case options
          //
          var iconOptions = {};
          if ($('#primaryIconList').val() != '') iconOptions.primary = $('#primaryIconList').val();
          if ($('#secondaryIconList').val() != '') iconOptions.secondary = $('#secondaryIconList').val();
          if (iconOptions.primary || iconOptions.secondary) options.icons = iconOptions;
          //
          // Display the command
          //
          $('#commandDisplay').html(
              "$('.testSubject').button("+$.forDisplay(options)+");<br>" +
              "$('.buttonsetSubject').buttonset()"
          );
          //
          // Register events
          //
          $('.testSubject').bind('click',function(){
            var what = $(this).text();
            if (what==null||what=='') what = this.value;
            say('Clicked ' + what);
          });
          //});
          //
          // Make the test subjects into buttons
          //
          $('.testSubject').button(options);
          $('.buttonsetSubject').buttonset();
        });
        $('#disableButton').click(function(){
          $('.testSubject').button('disable');
          $('.buttonsetSubject').buttonset('disable');
          $('#commandDisplay').html("$('.testSubject').button('disable');");
        });
        $('#enableButton').click(function(){
          $('.testSubject').button('enable');
          $('.buttonsetSubject').buttonset('enable');
          $('#commandDisplay').html("$('.testSubject').button('enable');");
        });
        $('#labForm').bind('reset',function(){
          $('.testSubject').button('destroy');
          $('.buttonsetSubject').buttonset('destroy');
          $('#labForm')[0].reset();
        });

      });

    </script>

    <style>
      #optionsContainer>div {
        float: left;
        width: 400px;
      }
      #buttonBar {
        clear: both;
        padding-top: 12px;
      }
      #column2 input[type=text] {
        width: 32px;
      }
      .testSubjectContainer .body {
        height: 256px;
      }
      #controlPanel label {
        float: left;
        text-align: right;
        width: 9em;
        font-weight: bold;
        margin-right: 6px;
      }
      #column2 label {
        width: 144px;
      }
      #console div {
        clear: both;
      }
      #console label {
        width: 6em;
      }
    </style>
  </head>

  <body class="fancy">

    <div id="pageContainer">
      <div id="pageContent">

        <h1>jQuery UI Buttons Lab</h1>

        <div id="controlPanel" data-module="Control Panel">
          <form action="" id="labForm">

            <h3>Button options</h3>

            <div>
              <label>text:</label>
              <input type="radio" name="text" value="" checked="checked" class="booleanOption">unspecified
              <input type="radio" name="text" value="true" class="booleanOption">true
              <input type="radio" name="text" value="false" class="booleanOption">false
            </div>

            <div>
              <label>primary icon:</label>
              <select id="primaryIconList">
                <option value="">&mdash; unspecified &mdash;</option>
                <option>ui-icon-carat-1-n</option><option>ui-icon-carat-1-ne</option><option>ui-icon-carat-1-e</option><option>ui-icon-carat-1-se</option><option>ui-icon-carat-1-s</option><option>ui-icon-carat-1-sw</option><option>ui-icon-carat-1-w</option><option>ui-icon-carat-1-nw</option><option>ui-icon-carat-2-n-s</option><option>ui-icon-carat-2-e-w</option><option>ui-icon-triangle-1-n</option><option>ui-icon-triangle-1-ne</option><option>ui-icon-triangle-1-e</option><option>ui-icon-triangle-1-se</option><option>ui-icon-triangle-1-s</option><option>ui-icon-triangle-1-sw</option><option>ui-icon-triangle-1-w</option><option>ui-icon-triangle-1-nw</option><option>ui-icon-triangle-2-n-s</option><option>ui-icon-triangle-2-e-w</option><option>ui-icon-arrow-1-n</option><option>ui-icon-arrow-1-ne</option><option>ui-icon-arrow-1-e</option><option>ui-icon-arrow-1-se</option><option>ui-icon-arrow-1-s</option><option>ui-icon-arrow-1-sw</option><option>ui-icon-arrow-1-w</option><option>ui-icon-arrow-1-nw</option><option>ui-icon-arrow-2-n-s</option><option>ui-icon-arrow-2-ne-sw</option><option>ui-icon-arrow-2-e-w</option><option>ui-icon-arrow-2-se-nw</option><option>ui-icon-arrowstop-1-n</option><option>ui-icon-arrowstop-1-e</option><option>ui-icon-arrowstop-1-s</option><option>ui-icon-arrowstop-1-w</option><option>ui-icon-arrowthick-1-n</option><option>ui-icon-arrowthick-1-ne</option><option>ui-icon-arrowthick-1-e</option><option>ui-icon-arrowthick-1-se</option><option>ui-icon-arrowthick-1-s</option><option>ui-icon-arrowthick-1-sw</option><option>ui-icon-arrowthick-1-w</option><option>ui-icon-arrowthick-1-nw</option><option>ui-icon-arrowthick-2-n-s</option><option>ui-icon-arrowthick-2-ne-sw</option><option>ui-icon-arrowthick-2-e-w</option><option>ui-icon-arrowthick-2-se-nw</option><option>ui-icon-arrowthickstop-1-n</option><option>ui-icon-arrowthickstop-1-e</option><option>ui-icon-arrowthickstop-1-s</option><option>ui-icon-arrowthickstop-1-w</option><option>ui-icon-arrowreturnthick-1-w</option><option>ui-icon-arrowreturnthick-1-n</option><option>ui-icon-arrowreturnthick-1-e</option><option>ui-icon-arrowreturnthick-1-s</option><option>ui-icon-arrowreturn-1-w</option><option>ui-icon-arrowreturn-1-n</option><option>ui-icon-arrowreturn-1-e</option><option>ui-icon-arrowreturn-1-s</option><option>ui-icon-arrowrefresh-1-w</option><option>ui-icon-arrowrefresh-1-n</option><option>ui-icon-arrowrefresh-1-e</option><option>ui-icon-arrowrefresh-1-s</option><option>ui-icon-arrow-4</option><option>ui-icon-arrow-4-diag</option><option>ui-icon-extlink</option><option>ui-icon-newwin</option><option>ui-icon-refresh</option><option>ui-icon-shuffle</option><option>ui-icon-transfer-e-w</option><option>ui-icon-transferthick-e-w</option><option>ui-icon-folder-collapsed</option><option>ui-icon-folder-open</option><option>ui-icon-document</option><option>ui-icon-document-b</option><option>ui-icon-note</option><option>ui-icon-mail-closed</option><option>ui-icon-mail-open</option><option>ui-icon-suitcase</option><option>ui-icon-comment</option><option>ui-icon-person</option><option>ui-icon-print</option><option>ui-icon-trash</option><option>ui-icon-locked</option><option>ui-icon-unlocked</option><option>ui-icon-bookmark</option><option>ui-icon-tag</option><option>ui-icon-home</option><option>ui-icon-flag</option><option>ui-icon-calendar</option><option>ui-icon-cart</option><option>ui-icon-pencil</option><option>ui-icon-clock</option><option>ui-icon-disk</option><option>ui-icon-calculator</option><option>ui-icon-zoomin</option><option>ui-icon-zoomout</option><option>ui-icon-search</option><option>ui-icon-wrench</option><option>ui-icon-gear</option><option>ui-icon-heart</option><option>ui-icon-star</option><option>ui-icon-link</option><option>ui-icon-cancel</option><option>ui-icon-plus</option><option>ui-icon-plusthick</option><option>ui-icon-minus</option><option>ui-icon-minusthick</option><option>ui-icon-close</option><option>ui-icon-closethick</option><option>ui-icon-key</option><option>ui-icon-lightbulb</option><option>ui-icon-scissors</option><option>ui-icon-clipboard</option><option>ui-icon-copy</option><option>ui-icon-contact</option><option>ui-icon-image</option><option>ui-icon-video</option><option>ui-icon-script</option><option>ui-icon-alert</option><option>ui-icon-info</option><option>ui-icon-notice</option><option>ui-icon-help</option><option>ui-icon-check</option><option>ui-icon-bullet</option><option>ui-icon-radio-off</option><option>ui-icon-radio-on</option><option>ui-icon-pin-w</option><option>ui-icon-pin-s</option><option>ui-icon-play</option><option>ui-icon-pause</option><option>ui-icon-seek-next</option><option>ui-icon-seek-prev</option><option>ui-icon-seek-end</option><option>ui-icon-seek-start</option><option>ui-icon-seek-first</option><option>ui-icon-stop</option><option>ui-icon-eject</option><option>ui-icon-volume-off</option><option>ui-icon-volume-on</option><option>ui-icon-power</option><option>ui-icon-signal-diag</option><option>ui-icon-signal</option><option>ui-icon-battery-0</option><option>ui-icon-battery-1</option><option>ui-icon-battery-2</option><option>ui-icon-battery-3</option><option>ui-icon-circle-plus</option><option>ui-icon-circle-minus</option><option>ui-icon-circle-close</option><option>ui-icon-circle-triangle-e</option><option>ui-icon-circle-triangle-s</option><option>ui-icon-circle-triangle-w</option><option>ui-icon-circle-triangle-n</option><option>ui-icon-circle-arrow-e</option><option>ui-icon-circle-arrow-s</option><option>ui-icon-circle-arrow-w</option><option>ui-icon-circle-arrow-n</option><option>ui-icon-circle-zoomin</option><option>ui-icon-circle-zoomout</option><option>ui-icon-circle-check</option><option>ui-icon-circlesmall-plus</option><option>ui-icon-circlesmall-minus</option><option>ui-icon-circlesmall-close</option><option>ui-icon-squaresmall-plus</option><option>ui-icon-squaresmall-minus</option><option>ui-icon-squaresmall-close</option><option>ui-icon-grip-dotted-vertical</option><option>ui-icon-grip-dotted-horizontal</option><option>ui-icon-grip-solid-vertical</option><option>ui-icon-grip-solid-horizontal</option><option>ui-icon-gripsmall-diagonal-se</option><option>ui-icon-grip-diagonal-se</option>
              </select>
            </div>

            <div>
              <label>secondary icon:</label>
              <select id="secondaryIconList">
                <option value="">&mdash; unspecified &mdash;</option>
                <option>ui-icon-carat-1-n</option><option>ui-icon-carat-1-ne</option><option>ui-icon-carat-1-e</option><option>ui-icon-carat-1-se</option><option>ui-icon-carat-1-s</option><option>ui-icon-carat-1-sw</option><option>ui-icon-carat-1-w</option><option>ui-icon-carat-1-nw</option><option>ui-icon-carat-2-n-s</option><option>ui-icon-carat-2-e-w</option><option>ui-icon-triangle-1-n</option><option>ui-icon-triangle-1-ne</option><option>ui-icon-triangle-1-e</option><option>ui-icon-triangle-1-se</option><option>ui-icon-triangle-1-s</option><option>ui-icon-triangle-1-sw</option><option>ui-icon-triangle-1-w</option><option>ui-icon-triangle-1-nw</option><option>ui-icon-triangle-2-n-s</option><option>ui-icon-triangle-2-e-w</option><option>ui-icon-arrow-1-n</option><option>ui-icon-arrow-1-ne</option><option>ui-icon-arrow-1-e</option><option>ui-icon-arrow-1-se</option><option>ui-icon-arrow-1-s</option><option>ui-icon-arrow-1-sw</option><option>ui-icon-arrow-1-w</option><option>ui-icon-arrow-1-nw</option><option>ui-icon-arrow-2-n-s</option><option>ui-icon-arrow-2-ne-sw</option><option>ui-icon-arrow-2-e-w</option><option>ui-icon-arrow-2-se-nw</option><option>ui-icon-arrowstop-1-n</option><option>ui-icon-arrowstop-1-e</option><option>ui-icon-arrowstop-1-s</option><option>ui-icon-arrowstop-1-w</option><option>ui-icon-arrowthick-1-n</option><option>ui-icon-arrowthick-1-ne</option><option>ui-icon-arrowthick-1-e</option><option>ui-icon-arrowthick-1-se</option><option>ui-icon-arrowthick-1-s</option><option>ui-icon-arrowthick-1-sw</option><option>ui-icon-arrowthick-1-w</option><option>ui-icon-arrowthick-1-nw</option><option>ui-icon-arrowthick-2-n-s</option><option>ui-icon-arrowthick-2-ne-sw</option><option>ui-icon-arrowthick-2-e-w</option><option>ui-icon-arrowthick-2-se-nw</option><option>ui-icon-arrowthickstop-1-n</option><option>ui-icon-arrowthickstop-1-e</option><option>ui-icon-arrowthickstop-1-s</option><option>ui-icon-arrowthickstop-1-w</option><option>ui-icon-arrowreturnthick-1-w</option><option>ui-icon-arrowreturnthick-1-n</option><option>ui-icon-arrowreturnthick-1-e</option><option>ui-icon-arrowreturnthick-1-s</option><option>ui-icon-arrowreturn-1-w</option><option>ui-icon-arrowreturn-1-n</option><option>ui-icon-arrowreturn-1-e</option><option>ui-icon-arrowreturn-1-s</option><option>ui-icon-arrowrefresh-1-w</option><option>ui-icon-arrowrefresh-1-n</option><option>ui-icon-arrowrefresh-1-e</option><option>ui-icon-arrowrefresh-1-s</option><option>ui-icon-arrow-4</option><option>ui-icon-arrow-4-diag</option><option>ui-icon-extlink</option><option>ui-icon-newwin</option><option>ui-icon-refresh</option><option>ui-icon-shuffle</option><option>ui-icon-transfer-e-w</option><option>ui-icon-transferthick-e-w</option><option>ui-icon-folder-collapsed</option><option>ui-icon-folder-open</option><option>ui-icon-document</option><option>ui-icon-document-b</option><option>ui-icon-note</option><option>ui-icon-mail-closed</option><option>ui-icon-mail-open</option><option>ui-icon-suitcase</option><option>ui-icon-comment</option><option>ui-icon-person</option><option>ui-icon-print</option><option>ui-icon-trash</option><option>ui-icon-locked</option><option>ui-icon-unlocked</option><option>ui-icon-bookmark</option><option>ui-icon-tag</option><option>ui-icon-home</option><option>ui-icon-flag</option><option>ui-icon-calendar</option><option>ui-icon-cart</option><option>ui-icon-pencil</option><option>ui-icon-clock</option><option>ui-icon-disk</option><option>ui-icon-calculator</option><option>ui-icon-zoomin</option><option>ui-icon-zoomout</option><option>ui-icon-search</option><option>ui-icon-wrench</option><option>ui-icon-gear</option><option>ui-icon-heart</option><option>ui-icon-star</option><option>ui-icon-link</option><option>ui-icon-cancel</option><option>ui-icon-plus</option><option>ui-icon-plusthick</option><option>ui-icon-minus</option><option>ui-icon-minusthick</option><option>ui-icon-close</option><option>ui-icon-closethick</option><option>ui-icon-key</option><option>ui-icon-lightbulb</option><option>ui-icon-scissors</option><option>ui-icon-clipboard</option><option>ui-icon-copy</option><option>ui-icon-contact</option><option>ui-icon-image</option><option>ui-icon-video</option><option>ui-icon-script</option><option>ui-icon-alert</option><option>ui-icon-info</option><option>ui-icon-notice</option><option>ui-icon-help</option><option>ui-icon-check</option><option>ui-icon-bullet</option><option>ui-icon-radio-off</option><option>ui-icon-radio-on</option><option>ui-icon-pin-w</option><option>ui-icon-pin-s</option><option>ui-icon-play</option><option>ui-icon-pause</option><option>ui-icon-seek-next</option><option>ui-icon-seek-prev</option><option>ui-icon-seek-end</option><option>ui-icon-seek-start</option><option>ui-icon-seek-first</option><option>ui-icon-stop</option><option>ui-icon-eject</option><option>ui-icon-volume-off</option><option>ui-icon-volume-on</option><option>ui-icon-power</option><option>ui-icon-signal-diag</option><option>ui-icon-signal</option><option>ui-icon-battery-0</option><option>ui-icon-battery-1</option><option>ui-icon-battery-2</option><option>ui-icon-battery-3</option><option>ui-icon-circle-plus</option><option>ui-icon-circle-minus</option><option>ui-icon-circle-close</option><option>ui-icon-circle-triangle-e</option><option>ui-icon-circle-triangle-s</option><option>ui-icon-circle-triangle-w</option><option>ui-icon-circle-triangle-n</option><option>ui-icon-circle-arrow-e</option><option>ui-icon-circle-arrow-s</option><option>ui-icon-circle-arrow-w</option><option>ui-icon-circle-arrow-n</option><option>ui-icon-circle-zoomin</option><option>ui-icon-circle-zoomout</option><option>ui-icon-circle-check</option><option>ui-icon-circlesmall-plus</option><option>ui-icon-circlesmall-minus</option><option>ui-icon-circlesmall-close</option><option>ui-icon-squaresmall-plus</option><option>ui-icon-squaresmall-minus</option><option>ui-icon-squaresmall-close</option><option>ui-icon-grip-dotted-vertical</option><option>ui-icon-grip-dotted-horizontal</option><option>ui-icon-grip-solid-vertical</option><option>ui-icon-grip-solid-horizontal</option><option>ui-icon-gripsmall-diagonal-se</option><option>ui-icon-grip-diagonal-se</option>
              </select>
            </div>

            <div>
              <label>label:</label>
              <input type="text" id="labelField" name="label" class="valueOption"/>
            </div>

            <div id="buttonBar">
              <button type="button" id="applyButton" class="green90x24">Apply</button>
              <button type="button" id="disableButton" class="green90x24">Disable</button>
              <button type="button" id="enableButton" class="green90x24">Enable</button>
              <button type="reset" id="resetButton" class="green90x24">Reset</button>
            </div>

          </form>

          <div>
            <h3>Executed commands:</h3>
            <div id="commandDisplay">---</div>
          </div>
        </div>

        <div id="testSubjectContainer" data-module="Test Subjects">

          <h3>Standalone buttons</h3>

          <div>
            <button type="button" class="testSubject">A button</button>
            <a href="#" class="testSubject">A link (anchor)</a>
            <input type="submit" value="A submit button" class="testSubject"/>
            <input type="reset" value="A reset button" class="testSubject"/>
            <input type="button" value="An input button" class="testSubject"/>
          </div>

          <h3>Radio Set</h3>

          <div class="buttonsetSubject">
            <input type="radio" name="chile" id="radioJalapeno"/><label for="radioJalapeno">Jalapeno</label>
            <input type="radio" name="chile" id="radioSeranno"/><label for="radioSeranno">Seranno</label>
            <input type="radio" name="chile" id="radioHabanero"/><label for="radioHabanero">Habnero</label>
            <input type="radio" name="chile" id="radioAnaheim"/><label for="radioAnaheim">Anaheim</label>
          </div>

          <h3>Checkbox Set</h3>

          <div class="buttonsetSubject">
            <input type="checkbox" name="condiment" id="checkboxMustard"/><label for="checkboxMustard">Mustard</label>
            <input type="checkbox" name="condiment" id="checkboxKetchup"/><label for="checkboxKetchup">Ketchup</label>
            <input type="checkbox" name="condiment" id="checkboxMayo"/><label for="checkboxMayo">Mayo</label>
            <input type="checkbox" name="condiment" id="checkboxTabasco"/><label for="checkboxTabasco">Tabasco</label>
          </div>

        </div>

        <div id="console" data-module="Console">
        </div>

      </div>
    </div>

  </body>
</html>

